<template>
  <!-- // 资源储备 -->
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">应急资源-队伍</div>
      <SelectOptions :value="sign" :options="option" @change="selectChange" />
      <!-- <div class="select">
        <select name="chooseDate" @change="select($event.target.value)">
          <option value="">全部</option>
          <option :value="item.value" v-for="(item, index) in option" :key="index">{{ item.label }}</option>
        </select>
      </div> -->
    </div>
    <div class="mainBottom padding10">
      <div class="flexBetween" style="height:20%">
        <div class="backgroundColor textCenter pointer" style="width:25%" @click="itemNumClick('1')">
          <div class="color008DFF fontWeight fontSize24 marginT5">{{ dwDataNums.onDeploy || 0 }}</div>
          <div class="white fontSize14">已调配</div>
        </div>
        <div class="backgroundColor textCenter pointer" style="width:25%" @click="itemNumClick('2')">
          <div class="colorEA753D fontWeight fontSize24 marginT5">{{ dwDataNums.onTheWay || 0 }}</div>
          <div class="white fontSize14">在途中</div>
        </div>
        <div class="backgroundColor textCenter pointer" style="width:25%" @click="itemNumClick('3')">
          <div class="color22EA15 fontWeight fontSize24 marginT5">{{ dwDataNums.onArrival || 0 }}</div>
          <div class="white fontSize14">已到达</div>
        </div>
      </div>
      <div id="Team" style="width:100%;height:88%">
        <!-- <BarChartsNewVue :option="option1" chartId="yjzydw" barChartsId="yjzydw1" @barClick="barClick"
          v-if="showBarCharts"></BarChartsNewVue> -->

        <BarCharts :option="option1" chartId="yjzydw" barChartsId="yjzydw1" @barClick="barClick"></BarCharts>
      </div>
    </div>

    <el-dialog title="资源台账-队伍" :visible.sync="dialogZytzVisible" width="70%">
      <el-table :data="tableData222" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="50" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of dwColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import BarChartsNewVue from "@/views/EmergencyResources/components/BarChartsNew.vue";
import SelectOptions from "@/components/selectOptions.vue";
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import { dwColums } from "@/views/SystemHomepage/HomePageContent/columns";
import { getResourceDetails, getResourceTeamData } from "@/api/EmergencyResources/EmergencyResources.js";
import { getResourceLevelUnit } from "@/api/common.js";
export default {
  name: "EDResourcesTeam",
  components: { BarCharts, SelectOptions },
  data() {
    return {
      option1: {
        barWidth: 36, // 柱子宽度
        basePointX: 20,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["在途中", "已到达"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(支)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      activeName: "first",
      data1: [], // 在途中
      data2: [], // 已到达
      data3: [], //
      xAxisData: ["基干队伍", "输电抢修", "变电抢修", "配电抢修"],
      dwColums: dwColums,
      dialogZytzVisible: false,
      tableData222: [],
      personOrgId: JSON.parse(sessionStorage.getItem("org")).orgId,
      option: [],
      orgId: JSON.parse(sessionStorage.getItem("org")).orgId,
      sign: "",
      dwDataNums: {}
    };
  },
  beforeDestroy() {
    this.$eventBus.$off("changeTeamData");
  },
  mounted() {
    // this.chart1 = this.$echarts.init(document.getElementById("Team"));
    this.getTeamDatas();
    this.getLevelUnit();
  },
  methods: {
    selectChange(val) {
      this.id = val;
      this.orgId = val;
      this.getTeamDatas(val);
    },
    getLevelUnit() {
      getResourceLevelUnit({ orgId: this.personOrgId }).then(res => {
        const option = res.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        option.unshift({ value: "", label: "全部" });
        this.option = option;
      });
    },
    getTeamDatas(id) {
      this.xAxisData = [];
      this.option1.xAxis[0].data = [];
      this.option1.series = [];
      getResourceTeamData({ orgId: id || this.personOrgId }).then(res => {
        this.dwDataNums = {
          onArrival: res.onArrival,
          onDeploy: res.onDeploy,
          onTheWay: res.onTheWay
        };
        const arr = res.resourceDateStateVos;
        this.data1 = arr.map(item => item.onTheWay); // 在途中
        this.data2 = arr.map(item => item.onArrival); // 已到达
        this.data3 = arr.map(item => item.onDeploy); //
        this.xAxisData = arr.map(item => item.category);
        this.option1.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option1.series.push([el, this.data2[index]]);
          // this.option1.series = [
          //   [5, 20],
          //   [30, 50]
          // ];
        });

      });
    },
    async itemNumClick(state, type) {
      let params = {
        orgId: this.orgId,
        state: state || "",
        categoryName: "3",
        type: type || "",
        pageNum: 1,
        pageSize: 100
      };
      if (state === "1") {
        params = {
          orgId: this.orgId,
          // state: state || "",
          categoryName: "3",
          type: "sy",
          pageNum: 1,
          pageSize: 100
        };
      }
      const res = await getResourceDetails(params);
      if (res) {
        this.tableData222 = res.teamList.data;
        this.dialogZytzVisible = true;
      }
    },
    barClick(barIndex, i) {
      if (this.option1.legends[i - 1] === "在途中") {
        this.itemNumClick("2", this.xAxisData[barIndex - 1]);
      } else {
        this.itemNumClick("3", this.xAxisData[barIndex - 1]);
      }
    },
    getTotal(list) {
      let num = 0;
      list.forEach(el => {
        num += el;
      });
      return num;
    },
    toResourceStatisticsList() {
      this.$router.push({ path: "/ResourceStatisticsList" });
    }
  }
};
</script>

<style scoped lang="less">
.homePageCard {
  height: 100%;
}

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {
  border-bottom: none;

  .el-tabs__item {
    color: #fff;
    padding: 0;
    width: 20%;
    height: auto;
    line-height: 30px;
    border: 1px solid #14a8ed;
    padding-left: 0;
    text-align: center;
    border-radius: 4px;

    &:nth-child(2) {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .el-tabs__nav {
    float: none;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    border: none;
  }

  .el-tabs__item.is-active {
    border-bottom: #14a8ed;
    background-color: #14a8ed;
  }
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

:deep(.el-table__fixed) {
  height: 580px !important;
}

.dwItemNum {
  width: 25%;
  cursor: pointer;
}

.colorEA753D {
  color: #ea753d;
}

.color22EA15 {
  color: #22ea15;
}
</style>
